import { environmentManager } from '@app-cad/module';
import { CadEnvironments } from '@app-cad-env/index';
import { DocumentContext } from '@app-cad/common/providers/documentProvider';
import { useContext } from 'react';
import './style.scss';
import { FeatureManager } from '@amcax/base';

export type EnvSwitchItem = {
  envId: string;
  label: string;
};

const EnvSwitch = () => {
  const { docTree } = useContext(DocumentContext);
  const environmentList = environmentManager.list.filter((item) => {
    return item.id !== 'NextCam';
  });
  const items = environmentList.filter(({ id }) => {
    if (docTree) {
      if (docTree.type === 'part') {
        return id !== CadEnvironments.Product;
      } else if (docTree.type === 'product') {
        return id === CadEnvironments.Product;
      }
      return true;
    }

    return false;
  });

  const activeEnvId = environmentManager.activatedEnv?.id;

  const onClick = (envId: string) => {
    if (envId !== activeEnvId) {
      environmentManager.switchTo(envId);
    }
  };
  return (
    FeatureManager.isFeatureEnabled('electron-show-port') && (
      <div className='env-switch'>
        {items.map((item) => {
          const isActive = item.id === activeEnvId;
          return (
            <div
              key={item.id}
              className={`item ${isActive ? 'active' : ''}`}
              onClick={() => onClick(item.id)}
              title={`${item.label}`}
            >
              {item.label}
            </div>
          );
        })}
      </div>
    )
  );
};
export default EnvSwitch;
